4-3 create-react-app&模板cra-template创建调试方案
create-react-app（CRA）简介
create-react-app 是 React 官方提供的脚手架工具，用于快速创建 React 项目。虽然 React 团队在 2025 年 2 月已宣布弃用 CRA，但它在学习和快速原型开发中仍有使用价值。
注意：新建项目推荐使用 Vite + React 或 Next.js 等现代方案。CRA 的使用更多是在已有项目的维护和源码调试场景中。
基本用法
# 使用 npx 创建项目（不安装全局包）
npx create-react-app my-app
# 使用 TypeScript 模板
npx create-react-app my-app --template typescript
# 使用自定义模板
npx create-react-app my-app --template cra-template-rne
bash
项目结构
my-app/
├── public/
│ ├── index.html # HTML 模板
│ └── ...
├── src/
│ ├── index.js # 应用入口
│ ├── App.js # 根组件
│ ├── App.css
│ └── ...
├── package.json
└── ...
text
用于 React 源码调试的方案
CRA 可以配合 React 源码进行调试，核心思路是通过 react-app-rewired 或 craco 修改 webpack 配置，将 React 的引用指向本地源码：
方案一：使用 cra-template-rne
这是一个预配置的 CRA 模板，集成了 React 源码调试所需的所有配置：
npx create-react-app debug-react --template cra-template-rne
bash
方案二：手动配置 alias
# 1. 创建 CRA 项目
npx create-react-app my-debug
# 2. 安装 craco
npm install @craco/craco --save-dev
# 3. 修改 package.json 的 scripts
# "start": "craco start"
# "build": "craco build"
# 4. 创建 craco.config.js 配置 alias
bash
// craco.config.js
const path = require('path');
const reactSourcePath = path.resolve(__dirname, '../react/packages');
module.exports = {
webpack: {
alias: {
'react': path.join(reactSourcePath, 'react'),
'react-dom': path.join(reactSourcePath, 'react-dom'),
'scheduler': path.join(reactSourcePath, 'scheduler'),
}
}
};
javascript
方案三：使用 Rescripts
npm install @rescripts/rescripts --save-dev
bash
// .rescriptsrc.js
module.exports = [
config => {
config.resolve.alias = {
...config.resolve.alias,
'react': path.resolve(__dirname, '../react/packages/react'),
'react-dom': path.resolve(__dirname, '../react/packages/react-dom'),
};
return config;
}
];
javascript
现代替代方案
| 工具 | 特点 | 推荐程度 |
|---|---|---|
| Vite + React | 极快的 HMR，简洁配置 | 推荐（新项目首选） |
| Next.js | SSR/SSG 支持，全栈能力 | 推荐（生产项目） |
| CRA | 官方脚手架（已弃用） | 不推荐新项目使用 |
| Remix | 全栈框架，React Router 团队出品 | 可选 |
对于源码调试，Vite 方案的配置更为简洁，只需在 vite.config.ts 中配置 resolve.alias 即可。
↑